<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import UserHeadSetting from './UserHeadSetting.vue'
import { sendServiceData } from '../../../../../common/service'
import { queryUserProfileApi, updateUserProfileApi } from '../../../../../common/service/api/userApi'
import { validEmailFunc, validMobileFunc } from '../../../../../common/hooks/FormValidHooks'
import { validFormThen } from '../../../../../common/hooks/FormHooks'
import { copyObjectSameTo, popMessage } from '../../../../../common/utils/normalUtils'

const emit = defineEmits(['loading'])
const state = reactive({
  isLoading: false,
  formData: {
    avatar: '',
    email: '',
    phonenumber: '',
    sex: '2',
    nickName: ''
  },
  uploadFile: null,
  isEdit: false,
  detail: {
    userId: '',
    userName: '',
    sex: '',
    deptGroup: '',
    roleGroup: '',
    postGroup: '',
    phonenumber: '',
    email: '',
    createTime: ''
  },

  rules: {
    nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
    sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
    email: [
      { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
      { validator: validEmailFunc, trigger: 'blur' }
    ],
    phonenumber: [
      { required: true, message: '手机号码不能为空', trigger: 'blur' },
      { validator: validMobileFunc, trigger: 'blur' }
    ]
  }
})

const formRef = ref()

const setLoading = (val:boolean) => {
  state.isLoading = val
  emit('loading', val)
}

const queryUserInfo = async () => {
  const result = await sendServiceData(queryUserProfileApi, {}, setLoading)
  const userDetail = result.user || {}
  copyObjectSameTo(userDetail, state.formData)// avatar
  Object.assign(state.detail, userDetail)
  state.detail.deptGroup = result.deptGroup
  state.detail.roleGroup = result.roleGroup
  state.detail.postGroup = result.postGroup
}

const submitHandler = () => {
  const send = { ...state.detail }// 原有逻辑照抄整个传
  Object.assign(send, state.formData)
  validFormThen(formRef, async () => {
    await sendServiceData(updateUserProfileApi, send, setLoading)
    popMessage('修改成功！')
  })
}

const cancelHandler = () => {
  state.isEdit = false
}

const editHandler = () => {
  state.isEdit = true
}


onMounted(() => {
  queryUserInfo()
})

</script>

<template>
  <el-form ref="formRef"
           :style="{width:'100%'}"
           :model="state.formData"
           :rules="state.isEdit?state.rules:[]"
           :label-width="100"
           class="form-box"
           status-icon>
    <div class="user-header">
      <user-head-setting v-model="state.formData.avatar" />
    </div>

    <el-form-item v-if="!state.isEdit" label="用户名称：">
      <div class="item-value">
        {{ state.detail.userName }}

        <div v-if="!state.isEdit" class="info-btn" @click="editHandler">
          修改信息
        </div>
      </div>
    </el-form-item>
    <el-form-item label="用户昵称：" prop="nickName">
      <el-input v-if="state.isEdit"
                v-model.trim="state.formData.nickName"
                placeholder="请输入用户昵称"
                :maxlength="50" />
      <div v-else class="item-value">
        {{ state.formData.nickName }}
      </div>
    </el-form-item>

    <el-form-item label="用户性别：" prop="sex">
      <el-radio-group v-if="state.isEdit"
                      v-model="state.formData.sex"
                      size="small">
        <el-radio-button label="男" value="0" />
        <el-radio-button label="女" value="1" />
        <el-radio-button label="未知" value="2" />
      </el-radio-group>
      <div v-else class="item-value">
        {{ String(state.detail.sex)==='0'?'男':(String(state.detail.sex)==='1'?'女':'未知') }}
      </div>
    </el-form-item>

    <el-form-item label="手机号码：" prop="phonenumber">
      <el-input v-if="state.isEdit"
                v-model.trim="state.formData.phonenumber"
                placeholder="请输入手机号码"
                :maxlength="50" />
      <div v-else class="item-value">
        {{ state.formData.phonenumber }}
      </div>
    </el-form-item>

    <el-form-item label="电子邮箱：" prop="email">
      <el-input v-if="state.isEdit"
                v-model.trim="state.formData.email"
                placeholder="请输入用户邮箱"
                :maxlength="200" />
      <div v-else class="item-value">
        {{ state.formData.email }}
      </div>
    </el-form-item>

    <el-form-item v-if="!state.isEdit" label="所属部门：">
      <div class="item-info-value">
        {{ state.detail.deptGroup }}
      </div>
    </el-form-item>
    <el-form-item v-if="!state.isEdit" label="所属角色：">
      <div class="item-info-value">
        {{ state.detail.roleGroup }}
      </div>
    </el-form-item>

    <el-form-item v-if="!state.isEdit" label="创建时间：">
      <div class="item-value">
        {{ state.detail.createTime }}
      </div>
    </el-form-item>
    <el-form-item label="">
      <div class="footer-ly">
        <el-button v-if="state.isEdit" type="danger" @click="cancelHandler">
          取 消
        </el-button>
        <el-button v-if="state.isEdit" type="primary" @click="submitHandler">
          确 定
        </el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

.form-box{
  padding: 10px 20px 0 20px;
  box-sizing: border-box;
}

.item-value{
  flex:none;
  width:100%;
  box-sizing: border-box;
  position: relative;

  .info-btn{
    position:absolute;
    top:0;
    right:10px;
    cursor: pointer;
    font-size:13px;
    padding: 0 3px;
    box-sizing: border-box;
    color:var(--w-color-light);

    &:hover{
      text-decoration: underline;
    }

  }
}
.item-info-value{
  flex:none;
  width:100%;
  line-height: 20px;
  vertical-align: top;
  word-break: break-all;
  white-space: normal;
  overflow-y: auto;
  padding: 3px 0;
  box-sizing: border-box;
  position: relative;
  max-height: 70px;
}

.user-header{
  flex:none;
  width:100%;
  position:relative;
  margin-bottom: 10px;
  .header-btn{
    position:absolute;
    top:0;
    right:10px;
  }
}

.base-box{
  border:1px solid var(--w-color-bor);
  border-radius: 3px;
  margin-top: 5px;
  padding: 10px;
  box-sizing: border-box;
}


:deep(.el-form-item){
  flex:auto;
  width:100%;
  border-bottom: var(--w-color-bor)!important;
}
.long-item{
  width:100%;
}
:deep(.el-form-item--default){
  margin-bottom: 12px!important;
}
:deep(.el-form-item__error){
  opacity: 1;
  font-size: 75%;
  margin-top: -2px;
}
</style>
